<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>找座位</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/seat.js"></script>
</head>
<body>
    <div id="root">
        <div id="navHeader">
            <div id="findSeatTab" onclick="changeFindBody()" class="navHeaderItem activeHeader">找座位</div>
            <div id="grabSeatTab" onclick="changeGrabBody()" class="navHeaderItem">帮占座</div>
        </div>
        <div id="findBody" class="seatBody" style="display: block">
            <!-- 找座位切换卡 -->
            <div class="seatItem"><a onClick="showDetailBody(1)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(2)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(3)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(4)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(5)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(6)">10 月 24 日 14:00</a></div>
        </div>
        <div id="grabBody" class="seatBody" style="display: none">
            <!-- 帮占座切换卡 -->
            <div class="seatItem"><a onClick="showDetailBody(7)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(8)">10 月 24 日 14:00</a></div>
            <div class="seatItem"><a onClick="showDetailBody(9)">10 月 24 日 14:00</a></div>
        </div>
        <div id="detailBody" style="display: none">
            <div id="detailInfo_1">
                <p>请核对好该同学的占座时间和你的时间，</p>
                <p>点击确认将匹配成功，并获得对方手机号，</p>
                <p>点击取消将返回上一页。</p>
            </div>
            <div id="detailButtonWrap">
                <button id="detailButtonItem_1" onclick="confirmPair()">确认</button>
                <button id="detailButtonItem_2" onclick="closeDetailBody()">返回</button>
                <button id="detailButtonItem_3" onclick="closeDetailBody()">取消</button>
            </div>
            <div id="detailInfo_2">
                <p>该同学的手机号为：</p>
                <p id="phone">18293456733</p>
                <p>请及时与他取得联系</p>
            </div>
        </div>
        <div id="navDeploy">
            <!-- 发布按钮 -->
            <button id="deployButton" onclick="showDeployBody()">发布</button>
        </div>
        <div id="deployBody" style="display: none">
            <!-- 发布页 -->
            <div id="deployForm">
                <div id="deploySelection">
                    <span>我要：</span>
                    <select id="deployType">
                        <option value="findSeat">找座位</option>
                        <option value="grabSeat">帮占座</option>
                    </select>
                    <span>！</span>
                </div>
                <div id="deploySelection">
                    <span>时间：</span>
                    <select id="deployMonth">
                        <!-- JS 填充 12 个月份 -->
                    </select>
                    <span>月</span>
                </div>
                <div id="deploySelection">
                    <span></span>
                    <select id="deployDay">
                        <!-- JS 填充 28/30/31 天 -->
                    </select>
                    <span>日</span>
                </div>
                <div id="deploySelection">
                    <span></span>
                    <select id="deployHour">
                        <!-- JS 填充 24 小时 -->
                    </select>
                    <span>时</span>
                </div>
                <div id="deploySelection">
                    <span></span>
                    <select id="deployMinute">
                        <!-- JS 填充 60 分钟 -->
                    </select>
                    <span>分</span>
                </div>
                <div class="clear"></div>
                <input id="deployButton" onclick="postMySeat()" value="提      交" type="button"/>
                <input id="closeButton" onclick="closeDeploy()" value="返      回" type="button"/>
            </div>
            <div id="detailInfo_3">
                <p>提交成功，请等候通知。</p>
            </div>
        </div>
        <div id="navFooter">
            <!-- 底部导航条 -->
            <div class="navFooterItem" onclick="window.location='./seat.html'">
                <img src="./image/home_pink.png" alt="home">
                <div class="clear"></div>
                <span class="activeFooter">首&nbsp;&nbsp;&nbsp;页</span>
            </div>
            <div class="navFooterItem" onclick="window.location='./message.html'">
                <img src="./image/message.png" alt="message">
                <div class="clear"></div>
                <span>个&nbsp;人&nbsp;信&nbsp;息</span>
            </div>
        </div>
    </div>
</body>
</html>